<template>
  <el-dialog
    title="预览"
    :visible.sync="previewVisible"
    :before-close="close"
    :close-on-click-modal="false"
    width="30%"
    top="5vh"
    @opened="opened"
  >
    <div id="canvas0_block" style="width: 100%; height: 100%">
      <canvas id="canvas0" style="width: 100%"></canvas>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      currentKey: "",
      currentJsmpeg: undefined,
    };
  },
  props: {
    previewVisible: {
      type: Boolean,
      default: false,
    },
    row: {},
  },
  methods: {
    close() {
      this.destroyVideo();
      this.$emit("hidePreview");
    },
    opened() {
      this.currentKey = this.row.key;
      this.initVideo();
    },
    initVideo() {
      if (this.currentKey != "") {
        this.currentJsmpeg = new this.$JSMpeg.Player(
          "ws://" + window.location.host + "/relay?key=" + this.currentKey,
          {
            canvas: document.getElementById("canvas0"),
          }
        );
      }
    },
    destroyVideo() {
      if (this.currentJsmpeg != undefined) {
        this.currentJsmpeg.destroy();
        if (this.$("#canvas0").length < 1) {
          this.$("#canvas0_block").append(
            '<canvas id="canvas0" style="width: 100%"></canvas>'
          );
        }
      }
      this.currentJsmpeg = undefined;
      this.currentKey = "";
    },
  },
  mounted() {},
};
</script>

<style>
</style>